<template>
    <div>
        <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a href="/">账户管理</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>账户余额</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="tab-nav-bd">
                <span class="title">账户余额</span>
            </div>
        </el-card>
        <ul class="currency-list" style="margin-top: 20px;">
            <li class="currency-item" v-for="i in 4" :key="i">
                <div class="currency-title">
                    下载币余额
                </div>
                <div class="currency-nums"><span>0</span></div>
            </li>
        </ul>
        <div>
            <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="ID" />
                    <el-table-column prop="type" label="类型" />
                    <el-table-column prop="order_id" label="订单号" />
                    <el-table-column prop="before" label="之前" />
                    <el-table-column prop="money" label="本次" />
                    <el-table-column prop="after" label="之后" />
                    <el-table-column prop="desc" label="描述" />
                    <el-table-column prop="date" label="日期" />
                </el-table>
            </el-card>
        </div>
    </div>
</template>
<script lang="ts" setup>
const tableData = [
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '支出',
        order_id: '1234567890',
        before: '12',
        money: '1',
        after: '11',
        desc: '某某数据付款',
        date: '2024-10-01',
    },
]
</script>
<style scoped>
.tab-nav-bd {
    margin-top: 16px;
}

.tab-nav-bd .title {
    font-size: 18px;
    font-weight: 700;
    color: #1D2129;
    line-height: 26px;
}

.currency-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 16px;
    margin-left: -16px;
}

.currency-list>li {
    position: relative;
    margin-left: 16px;
    padding: 22px 24px 0;
    width: 321px;
    height: 148px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(205, 102, 6, 0)), to(rgba(248, 193, 98, .3))) #FFF;
    background: linear-gradient(360deg, rgba(205, 102, 6, 0) 0, rgba(248, 193, 98, .3) 100%) #FFF;
    border-radius: 12px;
    overflow: hidden;
    z-index: 1;
}

.currency-list>li .currency-title {
    position: relative;
    font-size: 18px;
    color: #1D2129;
    line-height: 22px;
    text-align: left;
    z-index: 0;
}

.currency-list>li .currency-title::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 84px;
    height: 12px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 159, 112, .3)), to(rgba(254, 182, 146, .1)));
    background: linear-gradient(90deg, rgba(255, 159, 112, .3) 0, rgba(254, 182, 146, .1) 100%);
    border-radius: 12px;
    z-index: -1;
}

.currency-list>li .currency-nums {
    margin: 6px 0;
    font-size: 32px;
    font-weight: 700;
    color: #1D2129;
    line-height: 36px;
}
</style>